<template>
  <div class="page">
    <div class="header">
      <img
        src="@/assets/img/login/login-logo-fxc.png"
        alt=""
        class="max-logo"
        srcset=""
      />

      <!-- <img
        src="@/assets/img/login/min-logo.png"
        class="min-logo"
        alt=""
        srcset=""
      /> -->
    </div>

    <div class="footer">
      <!-- <div class="loginTitle">南京国际博览中心</div>
      <p class="loginMinTitle">Nanjing International Expo Centre</p> -->
      <div v-if="type == 1" class="inpBox">
        <input
          type="text"
          v-model="userName"
          class="inp userName"
          placeholder="请输入登录账号"
        />
      </div>
      <div v-if="type == 1" class="inpBox">
        <input
          :type="passwordCheck ? 'text' : 'password'"
          v-model="userPossword"
          class="inp password"
          placeholder="请输入密码"
        ></input>
        <van-switch class="switchPassword" v-model="passwordCheck" size='22px' inactive-color="#CCCCCC" />
      </div>
      <div v-if="type == 1" class="inpBox">
        <input
          type="text"
          v-model="yzmCode"
          class="inp yzmCode"
          placeholder="请输入验证码"
          style="width: 60%;"
        />
        <div class="yzm-code" @click="isChange">
          <img
            v-if="yzmUrl != '' && yzmUrl != null"
            :src="yzmUrl"
            style="height:35px;width:110px"
          />
        </div>
      </div>
      <div v-if="type == 1" class="passwordBox">
        <van-checkbox v-model="isKeep">记住账号</van-checkbox>

        <div @click="forgetPasswordOnclick()">忘记密码？</div>
      </div>
      <div v-if="type == 0" class="inpBox">
        <input
          type="text"
          v-model="form.mobilePhone"
          class="inp"
          placeholder="请输入手机号"
        />
      </div>
      <div v-if="type == 0" class="inpBox">
        <input
          type="text"
          v-model="code"
          class="inp yzm"
          placeholder="请输入验证码"
        />
        <span class="getYzm" @click="getYzm">{{ text }}</span>
      </div>
      <div class="loginBtn" @click="login()">登录</div>
    </div>
    <!-- <div class="loginType">
      <div class="loginTypeBox">
        <div class="isLine"></div>
        <div class="isOr">Or</div>
        <div v-if="type == 1" class="isType" @click="changType(0)">
          短信验证码登录
        </div>
        <div v-if="type == 0" class="isType" @click="changType(1)">
          账号密码登录
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { Toast, Checkbox, CheckboxGroup, Switch } from "vant";
import { getValue, setValue, setObject, clear } from "@/utils/auth";
import { postHandle, getHandle } from "@/api";
import crypto from "crypto";
export default {
  components: {
    [Toast.name]: Toast,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Switch.name]: Switch,
  },
  data() {
    let loginPageUserName = getValue("loginPageUserName");
    return {
      passwordCheck:false,
      type: 1,
      isKeep: loginPageUserName ? true : false,
      userName: loginPageUserName,
      userPossword: "",
      loginInfo: "",
      LoginInfoAll:"",
      yzmUrl: "",
      yamId: "",
      codeImgId: "",
      yzmCode: "",
      form: {
        mobilePhone: "",
      },
      code: "",

      text: "获取验证码",
      num: 59,
    };
  },
  created() {
    this.getYzmCode();
  },
  mounted() {},
  methods: {
    getFormkey() {
      return new Promise((resolve, reject) => {
        getHandle("/venues/api/exhibitionManage/formKey/queryAllList").then(
          (res) => {
            console.log(res);
            setValue("formKey", JSON.stringify(res.body.data));
            resolve(res.body.data);
          },
          (err) => {
            console.log(err);
          }
        );
      });
    },
    getMenu(data) {
      return new Promise((resolve, reject) => {
        getHandle("/venues/api/userManage/menu/queryList", {
          channelTypeTmp: "APP",
          appInfoCodeTmp: "",
        }).then(
          (res) => {
            if (res.body.data && res.body.data.length > 0) {
              setValue("menuList", JSON.stringify(res.body.data[0].children));
              resolve(res.body.data[0].children);
            } else {
              Toast.clear();
              this.$toast("您没有任何权限，请联系管理员");
              return;
            }
          },
          (err) => {
            Toast.clear();
            console.log(err);
          }
        );
      });
    },
    promiseAll() {
      let self = this;
      Promise.all([this.getFormkey(), this.getMenu()])
        .then((result) => {
          Toast.clear();
          if (result[1].length == 0) {
            this.$toast("您没有任何权限，请联系管理员");
            return;
          }
          this.$toast("登录成功");
          this.$bridge.call("index", this.LoginInfoAll);
        })
        .catch((error) => {
          Toast.clear();
          console.log(error);
        });
    },
    login() {
      clear();
      if (this.type == 1) {
        //账号密码登录
        var sha1 = crypto.createHash("sha1");
        sha1.update(this.userPossword);
        const password_sha = sha1.digest("hex");
        if (this.userName == null || this.userName.trim() == "") {
          this.$toast("请输入账号");
          return false;
        }
        if (this.userPossword == null || this.userPossword.trim() == "") {
          this.$toast("请输入密码");
          return false;
        }
        if (this.yzmCode == null || this.yzmCode.trim() == "") {
          this.$toast("请输入验证码");
          return false;
        }
        if (this.isKeep) {
          setValue("loginPageUserName", this.userName);
        } else {
          setValue("loginPageUserName", "");
        }
        let params = {
          loginName: this.userName,
          password_sha: password_sha,
          code: this.yzmCode,
          codeImgId: this.yamId,
          callChannel: "1",
          mobileType: "1",
        };
        let self = this;
        Toast.loading({
          message: "登录中...",
          duration: 0,
          forbidClick: true,
          loadingType: "spinner",
        });
        postHandle("/venues/api/userManage/login", params).then(
          (res) => {
            debugger
            setObject(res.body);
            this.loginInfo = res.body;
            this.LoginInfoAll=res
            this.promiseAll();
          },
          (err) => {
            Toast.clear();
            this.getYzmCode();
            console.log(err);
          }
        );
      } else {
        //验证码登录

        if (this.form.mobilePhone.trim() == "") {
          this.$toast("请输入手机号");
          return false;
        }
        if (this.code.trim() == "") {
          this.$toast("请输入验证码");
          return false;
        }

        let params = {
          mobilePhone: this.form.mobilePhone,
          code: this.code,
          callChannel: "1",
          mobileType: "1",
        };
        let self = this;
        Toast.loading({
          message: "登录中...",
          duration: 0,
          forbidClick: true,
          loadingType: "spinner",
        });
        postHandle("/venues/api/userManage/phoneCodeLogin", params).then(
          (res) => {
            setObject(res.body);
            this.loginInfo = res.body;
            this.promiseAll();
          },
          (err) => {
            Toast.clear();
            console.log(err);
          }
        );
      }
    },
    forgetPasswordOnclick() {

      console.log("235678");
      this.$bridge.call("forgetPassword");
    },
    changType(num) {
      this.type = num;
    },
    getYzmCode() {
      getHandle("/venues/api/userManage/getCode").then((res) => {
        this.yzmUrl = res.body.imgBase64Str;
        this.yamId = res.body.codeImgId;
        this.yzmCode = "";
      });
    },
    // 看不清换一张
    isChange() {
      this.getYzmCode();
    },
    getYzm() {
      if (this.num != 59) {
        return;
      }
      const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!phoneReg.test(this.form.mobilePhone)) {
        Toast("请输入正确手机号");
        return;
      } else {
        this.phoneError = false;
      }

      const condition = Object.assign({}, this.form);

      condition.scene = "PHONE_CODE_LOGIN";

      var sha1 = crypto.createHash("sha1");
      sha1.update(
        this.form.mobilePhone
          .split("")
          .reverse()
          .join("")
      );
      const code_sha = sha1.digest("hex").substring(10, 20);
      condition.sign = code_sha;
      postHandle("/venues/api/sms/phoneCode/sendPhoneCode", condition)
        .then(() => {
          Toast("发送成功");

          this.disabled = true;
          const int = setInterval(() => {
            this.text = this.num + "s";
            this.num--;
            if (this.num === 0) {
              this.disabled = false;
              clearInterval(int);
              this.text = "发送验证码";
              this.num = 59;
            }
          }, 1000);
        })
        .catch((err) => {
          console.log(err);

          Toast(err);
          return;
        });
    },
  },
};
</script>

<style scoped>
.switchPassword{
  position: absolute;
  right: 0;
  top: 8px;
  line-height: 24px;
}
.switchPassword::before{
  content: "123";
  font-size: 10px;
  position: relative;
  top: -3px;
  left: 1px;
  color: #fff;
}
.switchPassword::after{
  content: "***";
  font-size: 10px;
  position: relative;
  top: -2px;
  right: -4px;
  color: #fff;
}
.yzmCode{
  background-image: url('~@/assets/img/login/yzmCode-icon-fxc.png');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 0 16px;
}
.password{
  background-image: url('~@/assets/img/login/password-icon-fxc.png');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 0 16px;
}
.userName{
  background-image: url('~@/assets/img/login/user-icon-fxc.png');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 0 16px;
 }
.passwordBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* margin-bottom: 40px; */
}
.page {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
}

.header {
  position: relative;
  overflow: hidden;
  height: 244px;
}
.min-logo {
  position: absolute;
  left: 50%;
  width: 68px;
  height: 68px;
  margin-left: -34px;
  top: 146px;
}
.header .max-logo {
  width: 100%;
  height: 220px;
}
.logo {
  display: block;
  margin-bottom: 20px;
  width: 64px;
  height: 64px;
}

.footer {
  width: 100%;
  padding: 30px;
  padding-top: 0;
  min-height: 337px;
}

.loginTitle {
  text-align: center;
  height: 25px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 25px;
  background-color: red;
}
.loginMinTitle {
  height: 19px;
  font-size: 14px;
  font-family: Avenir-Book, Avenir;
  font-weight: normal;
  color: #333333;
  line-height: 19px;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 23px;
}
.inpBox {
  width: 100%;
  height: 50px;
  position: relative;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.inpIcon {
  width: 15px;
  height: 16px;
  position: absolute;
  top: 17px;
  left: 0;
}

.inp {
  width: 100%;
  height: 100%;
  /* border-bottom: 1px solid #ddd; */
  font-size: 16px;
  color: #333333;
  font-weight: 400;
  padding-left: 31px;
}
.yzm {
  display: inline-block;
  width: calc(100% - 100px);
}

.loginBtn {
  width: 100%;
  height: 45px;
  background-color: #1890ff;
  border-radius: 2px;
  color: #ffffff;
  font-size: 16px;
  line-height: 45px;
  text-align: center;
  margin-top: 30px;
}
.loginType {
  width: 100%;
  /* position: fixed;
  left: 0;
  bottom: 25px; */
}
.loginTypeBox {
  width: 100%;
  height: 60px;
  /* border: 1px solid #000000; */
  padding: 0 30px;
  position: relative;
}
.isLine {
  width: calc(100% - 60px);
  border-bottom: 1px solid #d8d8d8;
  position: absolute;
  top: 15px;
  left: 30px;
}
.isOr {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  width: 100px;
  position: absolute;
  top: 6px;
  left: calc(50% - 50px);
  background: #ffffff;
  text-align: center;
}
.isType {
  font-size: 14px;
  font-weight: 400;
  color: #1890ff;
  width: 100%;
  text-align: center;
  padding-top: 35px;
}
.getYzm {
  font-size: 14px;
  font-weight: 400;
  color: #1890ff;
  text-align: right;
  display: inline-block;
  width: 100px;
  line-height: 50px;
}
.yzm-code {
  position: absolute;
  top: 0px;
  right: 10px;
}
</style>
